Vue.component('com-citychoice',{
	data:function(){
		return {
			isCancel:false,
			zimShow:false,
			ssval:'',
			zimText:'',
			sidabers:[
				'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'
			],
			citys:[
				{city:'法兰克福',py:'falankefu'},{city:'福冈',py:'fugang'},{city:'佛山',py:'foshan'},{city:'广汉',py:'guanghan'},{city:'格尔木',py:'geermu'},
				{city:'广元',py:'guangyuan'},{city:'海口',py:'haikou'},{city:'河内',py:'henei'},{city:'呼和浩特',py:'huhehaote'},
				{city:'合肥',py:'hefei'},{city:'杭州',py:'hangzhou'},{city:'香港',py:'xianggang'},{city:'普吉岛',py:'pujidao'},{city:'海拉尔',py:'hailaer'},
				{city:'哈密',py:'hami'},{city:'衡阳',py:'hengyang'},{city:'哈尔滨',py:'haerbin'},{city:'和田',py:'hetian'},
				{city:'汉中',py:'hanzhong'},{city:'首尔仁川',py:'shouerrenchuan'},{city:'银川',py:'yinchuan'},{city:'庆阳',py:'qingyang'},
				{city:'纽约',py:'niuyue'},{city:'嘉峪关',py:'jiayuguan'},{city:'西双版纳',py:'xishuangbanna'},{city:'九江',py:'jiujiang'},
				{city:'泉州',py:'quanzhou'},{city:'锦州',py:'jinzhou'},{city:'衢州',py:'quzhou'},{city:'广元',py:'guangyuan'},
				{city:'喀什',py:'kashi'},{city:'南昌',py:'nanchang'},{city:'昆明',py:'kunming'},
				{city:'三亚',py:'sanya'},{city:'深圳',py:'shenzhen'},{city:'大邱',py:'daqiu'},
				{city:'青岛',py:'qingdao'},{city:'塔什干',py:'tashigan'},{city:'济南',py:'jinan'},{city:'天津',py:'tianjin'},
				{city:'黄山',py:'huangshan'},{city:'太原',py:'taiyuan'},{city:'乌兰巴托',py:'wulanbatuo'},{city:'阿巴坎',py:'abakan'},
				{city:'乌鲁木齐',py:'wulumuqi'},{city:'潍坊',py:'weifang'},{city:'威海',py:'weihai'},{city:'温州',py:'wenzhou'},
				{city:'武汉',py:'wuhan'},{city:'武夷山',py:'wuyishan'},{city:'梧州',py:'wuzhou'},{city:'襄阳',py:'xiangyang'},
				{city:'西昌',py:'xichang'},{city:'西郊',py:'xijiao'},{city:'西安',py:'xian'},{city:'厦门',py:'xiamen'},
				{city:'西宁',py:'xining'},{city:'徐州',py:'xuzhou'},{city:'宜宾',py:'yibin'},
				{city:'宜昌',py:'yichang'},{city:'伊宁',py:'yining'},{city:'义乌',py:'yiwu'},{city:'烟台',py:'yantai'},
				{city:'温哥华',py:'wengehua'},{city:'多伦多',py:'duolunduo'},{city:'湛江',py:'zhanjiang'},{city:'珠海',py:'zhuhai'},
				{city:'万州',py:'wanzhou'},{city:'榆林',py:'yulin'},{city:'济州',py:'jizhou'},{city:'济宁',py:'jining'},{city:'金昌',py:'jinchang'},
				{city:'赣州',py:'ganzhou'},{city:'库尔勒',py:'kuerle'},{city:'克拉玛依',py:'kelamayi'},{city:'吉隆坡',py:'jilongpo'},
				{city:'贵阳',py:'guiyang'},{city:'桂林',py:'guilin'},{city:'洛杉矶',py:'luoshanji'},{city:'伦敦',py:'lundun'},{city:'兰州',py:'lanzhou'},
				{city:'丽江',py:'lijiang'},{city:'庐山',py:'lushan'},{city:'拉萨',py:'lasa'},{city:'洛阳',py:'luoyang'},
				{city:'连云港',py:'lianyungang'},{city:'临沂',py:'linyi'},{city:'柳州',py:'liuzhou'},{city:'泸州',py:'luzhou'},{city:'澳门',py:'aomen'},
				{city:'绵阳',py:'mianyang'},{city:'莫斯科',py:'mosike'},{city:'南充',py:'nanchong'},{city:'北京南苑',py:'beijinnanyuan'},{city:'齐齐哈尔',py:'qiqihaer'},
				{city:'宁波',py:'ningbo'},{city:'名古屋',py:'mingguwu'},{city:'长崎',py:'changqi'},{city:'南京',py:'nanjing'},{city:'南宁',py:'nanning'},
				{city:'南阳',py:'nanyang'},{city:'东京成田',py:'dongjinchengtian'},{city:'南通',py:'nantong'},{city:'南头',py:'nantou'},
				{city:'冈山',py:'gangshan'},{city:'芝加哥',py:'zhijiage'},{city:'大阪',py:'daban'},{city:'北京首都',py:'beijinshoudu'},
				{city:'柬埔寨',py:'jianpuzhai'},{city:'釜山',py:'fushan'},{city:'上海浦东',py:'shanghaipudong'},{city:'旧金山',py:'jiujinshan'},
				{city:'胡志明',py:'huzhiming'},{city:'上海虹桥',py:'shanghaihongqiao'},{city:'沈阳',py:'shenyang'},{city:'秦皇岛',py:'qinhuangdao'},
				{city:'新加坡',py:'xinjiapo'},{city:'石家庄',py:'shijiazhuang'},{city:'汕头',py:'shantou'},{city:'柏林',py:'bolin'},
				{city:'悉尼',py:'xini'},{city:'巴塞罗那',py:'basailuona'},{city:'景德镇',py:'jingdezhen'},{city:'张掖',py:'zhangye'},
				{city:'清迈',py:'qingmai'},{city:'巴库',py:'baku'},{city:'新泻',py:'xinxie'},{city:'北海',py:'beihai'},
				{city:'安康',py:'ankang'},{city:'邯郸',py:'handan'},{city:'九寨沟',py:'jiuzhaigou'},{city:'阎良',py:'yanliang'},
				{city:'富山',py:'fushan'},{city:'乌海',py:'wuhai'},{city:'冲绳',py:'chongsheng'},{city:'盐城',py:'yancheng'},
				{city:'安阳',py:'anyang'},{city:'孟买',py:'mengmai'},{city:'德里',py:'deli'},{city:'纽伦堡',py:'niulunbao'},
				{city:'东营',py:'dongying'},{city:'安顺',py:'anshun'},{city:'阿姆斯特丹',py:'amusitedan'},{city:'无锡',py:'wuxi'},
				{city:'鄂尔多斯',py:'eerduosi'},{city:'运城',py:'yuncheng'},{city:'中卫',py:'zhongwei'},{city:'台北松山',py:'taibeisongshan'},
				{city:'台北桃园',py:'taibeitaoyuan'},{city:'玉树',py:'yushu'},{city:'固原',py:'guyuan'},{city:'淮安',py:'huaian'},
				{city:'大庆',py:'daqing'},{city:'高松',py:'gaosong'},{city:'天水',py:'tianshui'},{city:'清州',py:'qingzhou'},
				{city:'腾冲',py:'tengchong'},{city:'阿拉木图',py:'alamutu'},{city:'安克雷奇',py:'akeleiqi'},{city:'鞍山',py:'anshan'},
				{city:'安庆',py:'anqing'},{city:'包头',py:'baotou'},{city:'曼谷',py:'mangu'},{city:'布鲁塞尔',py:'bulusaier'},
				{city:'文莱',py:'wenlai'},{city:'广州',py:'guangzhou'},{city:'巴黎戴高乐',py:'balidaigaole'},{city:'常德',py:'changde'},
				{city:'雅加达',py:'yajiada'},{city:'郑州',py:'zhengzhou'},{city:'长春',py:'changchun'},{city:'长治',py:'changzhi'},
				{city:'重庆',py:'chongqing'},{city:'科隆坡',py:'kelongpo'},{city:'长沙',py:'changsha'},{city:'成都',py:'chengdu'},
				{city:'常州',py:'changzhou'},{city:'大同',py:'datong'},{city:'达州',py:'dazhou'},{city:'德里',py:'deli'},
				{city:'大连',py:'dalian'},{city:'敦煌',py:'dunhuang'},{city:'迪拜',py:'dibai'},{city:'张家界',py:'zhangjiajie'},
				{city:'恩施',py:'enshi'},{city:'延安',py:'yanan'},{city:'平壤',py:'pingrang'},{city:'福州',py:'fuzhou'},
				{city:'阿巴坎',py:'abakan'},{city:'首尔',py:'shouer'},{city:'阜阳',py:'fuyang'},{city:'井冈山',py:'jinggangshan'},
				{city:'锡林浩特',py:'xilinhaote'},{city:'迪庆',py:'diqing'},{city:'帕尔马',py:'paerma'},
				{city:'青森',py:'qingsen'},{city:'瓦特',py:'wate'},{city:'秋田',py:'qiutian'},{city:'沙巴亚庇 ',py:'shabayabi'},
				{city:'比仕凯克',py:'bishikaike'},{city:'雅典',py:'yadian'},{city:'开罗',py:'kailuo'},{city:'宿雾',py:'suwu'},
				{city:'朝阳',py:'chaoyang'},{city:'赤峰',py:'chifeng'},{city:'哥本哈根',py:'gebenhagen'},{city:'达卡',py:'daka'},
				{city:'当阳',py:'dangyang'},{city:'丹东',py:'dandong'},{city:'布琼布拉',py:'buqiongbula'},{city:'亚的',py:'yadi'},
				{city:'巴厘岛',py:'balidao'},{city:'杜尚别',py:'dushangbie'},{city:'新泽西',py:'xinzexi'},{city:'罗马',py:'luoma'},
				{city:'福岛',py:'fudao'},{city:'伏龙芝',py:'fulongzhi'},{city:'静冈',py:'jinggang'},{city:'广岛',py:'guangdao'},
				{city:'乌兰浩特',py:'wulanhaote'},{city:'花卷',py:'huajuan'},{city:'舟山',py:'zhoushan'},{city:'赤塔',py:'chita'},
				{city:'惠州',py:'huizhou'},{city:'台州',py:'taizhou'},{city:'伊尔库',py:'yierku'},{city:'伊斯兰堡',py:'yisilanbao'},
				{city:'石见',py:'shijian'},{city:'出云',py:'chuyun'},{city:'佳木斯',py:'jiamusi'},{city:'鸡西',py:'jixi'},
				{city:'高松',py:'gaosong'},{city:'库车',py:'kuche'},{city:'高知',py:'gaozhi'},{city:'卡拉奇',py:'kaqila'},
				{city:'大阪关西',py:'dabanguanxi'},{city:'克诺',py:'kenuo'},{city:'宫崎',py:'gongqi'},{city:'熊本',py:'xiongben'},
				{city:'鹿儿岛',py:'luerdao'},{city:'拉瓦格',py:'lawage'},{city:'耒阳',py:'leiyang'},{city:'列日',py:'lieri'},
				{city:'光化',py:'guanghua'},{city:'澳码',py:'aoma'},{city:'马德里',py:'madeli'},{city:'曼德勒',py:'mandele'},
				{city:'墨尔本',py:'moerben'},{city:'孟菲斯',py:'mengfeisi'},{city:'米兰',py:'milan'},{city:'马尼拉',py:'manila'},
				{city:'明斯克',py:'mingsike'},{city:'梅县',py:'meixian'},{city:'松山',py:'songshan'},{city:'金边',py:'jinbian'},
				{city:'清迈',py:'qingmai'},{city:'卡塔尔',py:'kataer'},{city:'利雅得',py:'liyade'},{city:'罗勇',py:'luoyong'},
				{city:'韶关',py:'shaoguan'},{city:'仙台',py:'xiantai'},{city:'西雅图',py:'xiyatu'},{city:'莎迦',py:'shajia'},
				{city:'沙市',py:'shashi'},{city:'塞班',py:'saiban'},{city:'斯德格尔摩',py:'sidegeermo'},{city:'思茅',py:'simao'},
				{city:'苏邦',py:'subang'},{city:'铜仁凤凰',py:'tongrenfenghuang'},{city:'通辽',py:'tongliao'},{city:'德岛',py:'dedao'},
				{city:'特拉维夫',py:'telaweifu'},{city:'富山',py:'fushan'},{city:'多莫杰多沃',py:'duomojieduowo'},{city:'布拉戈',py:'bulage'},
				{city:'堪察加',py:'kancajia'},{city:'萨马拉',py:'samala'},{city:'山口宇部',py:'shankouyubu'},{city:'维也纳',py:'weiyena'},
				{city:'符拉',py:'fula'},{city:'华沙',py:'huasha'},{city:'王家墩',py:'wangjiadun'},{city:'兴宁',py:'xingning'},
				{city:'苏黎世',py:'sulishi'},{city:'兴义',py:'xingyi'},{city:'黎平',py:'liping'},
				{city:'万象',py:'wanxiang'},{city:'北海',py:'beihai'},{city:'曼谷廊曼',py:'mangulangman'},{city:'高雄',py:'gaoxiong'},
				{city:'荔波',py:'libo'},{city:'永州',py:'yongzhou'},{city:'遵义',py:'zunyi'},{city:'大理',py:'dali'},
				{city:'百色',py:'baise'},{city:'仰光',py:'yangguang'},{city:'芒市',py:'mangshi'},{city:'毕节',py:'bijie'},
				{city:'保山',py:'baoshan'},{city:'加德满都',py:'jiademandu'},{city:'日喀则',py:'rikaze'},{city:'凯里黄平',py:'kailihuangping'},
				{city:'宜春',py:'yichun'},{city:'临沧',py:'lincang'},{city:'文山',py:'wenshan'},{city:'泰国万伦',py:'taiguowanlun'},
				{city:'牡丹江',py:'mudanjiang'},{city:'甲米',py:'jiami'},{city:'林芝',py:'linzhi'},{city:'光州',py:'guangzhou'},
				{city:'怀化芷江',py:'huaihuazhijiang'},{city:'威尼斯',py:'weinisi'},{city:'黔江',py:'qianjiang'},{city:'马累',py:'malei'},
				{city:'唐山',py:'tangshan'},{city:'新加坡实里塔',py:'xinjiaposhilita'},{city:'长白山',py:'changbaishan'},{city:'阎良',py:'yanliang'},
				{city:'吕梁',py:'lvliang'},{city:'六盘水',py:'liupangshui'},{city:'河池',py:'hechi'},{city:'吉林',py:'jilin'},{city:'日照',py:'rizhao'},
				{city:'邦达',py:'bangda'},{city:'岘港',py:'xiangang'},{city:'蒲城',py:'pucheng'},{city:'盐城',py:'yancheng'},
				{city:'攀枝花',py:'panzhihua'},{city:'阿克苏',py:'akesu'},{city:'卡尔',py:'kaer'},{city:'满洲里',py:'manzhouli'},
				{city:'清莱',py:'qinglai'},{city:'奇姆肯特',py:'qimukente'},{city:'巴塞尔',py:'basaier'},{city:'布尔歇',py:'buerxie'},
				{city:'博鳌',py:'boao'},{city:'班加罗尔',py:'banjialuoer'},{city:'东京羽田',py:'dongjinyutian'},{city:'首尔金浦',py:'shouerjinpu'},
				{city:'五台山',py:'wutaishan'},{city:'稻城',py:'daocheng'},{city:'苏梅岛',py:'sumeidao'},{city:'芽庄',py:'yazhuang'},
				{city:'神农架红坪',py:'shennongjiahongping'},{city:'民丹岛',py:'mindandao'},{city:'泸沽湖',py:'lugudao'},{city:'十堰',py:'shiyan'},
				{city:'费尔班克斯',py:'feierbankesi'},{city:'阿斯塔纳',py:'asitana'},{city:'帕劳',py:'palao'},{city:'茅台',py:'maotai'},
				{city:'九华山',py:'shashi'},{city:'西哈努克',py:'saiban'},{city:'安庆',py:'sidegeermo'},{city:'北戴河',py:'simao'},
				{city:'临汾',py:'linfen'},{city:'邵阳',py:'shaoyang'},{city:'美娜多',py:'meinaduo'},{city:'兰卡威 ',py:'lakawei'},
				{city:'莫斯科',py:'mosike'},{city:'上饶',py:'shangrao'},{city:'张家口',py:'zhangjiakou'},{city:'芭提雅',py:'batiya'},{city:'岳阳',py:'yueyang'},
				{city:'揭阳',py:'jieyang'},{city:'扬州泰州',py:'yangzhoutaizhou'}
			],
			hostCitys:[{city:'贵阳',py:'guiyang'},{city:'北京首都',py:'beijinshoudu'},{city:'上海虹桥',py:'shanghaihongqiao'},{city:'广州',py:'guangzhou'},
					   {city:'深圳',py:'shenzhen'},{city:'成都',py:'chengdu'},{city:'杭州',py:'hangzhou'},{city:'武汉',py:'wuhan'},{city:'重庆',py:'chongqing'}
					  ]
		}
	},
	template:`
		<section class="cityChoiceBox" id="cityChoiceBox">
			<article class="cityChoice-top transit" v-bind:class='{focus:isCancel}'>
				<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
					<span class="fa fa-angle-left" v-if='!isCancel' v-on:click='cityClose'></span>
				</transition>
				<input type="text" class="search-input" placeholder="中文/拼音/首写字母" v-model.trim='ssval' v-on:focus='search' />
				<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
					<i v-if='isCancel' v-on:click='isCancel=false' class="cancel">取消</i>
				</transition>
			</article>
			<article class="city-Box" v-show='!isCancel'>
				<div class="city-sidaber" id="city-sidaber" v-show='!isCancel'>
					<p v-for="(sidaber,index) in sidabers" v-on:touchstart='mousedownFun(index)' v-on:touchend='mouseupFun(index)' v-text='sidaber'></p>
				</div>
				<div class="host-city">
					<h3>热门城市</h3>
					<span v-for='(item,index) in hostCitys' v-text='item.city' v-on:click='cityactive(index,hostCitys)'></span>
				</div>
				<div class="city-content">
					<h3>A</h3>
					<p v-for='(item,index) in cityA' v-on:click='cityactive(index,cityA)'>{{item.city}}</p>
					<h3>B</h3>
					<p v-for='(item,index) in cityB' v-on:click='cityactive(index,cityB)'>{{item.city}}</p>
					<h3>C</h3>
					<p v-for='(item,index) in cityC' v-on:click='cityactive(index,cityC)'>{{item.city}}</p>
					<h3>D</h3>
					<p v-for='(item,index) in cityD' v-on:click='cityactive(index,cityD)'>{{item.city}}</p>
					<h3>E</h3>
					<p v-for='(item,index) in cityE' v-on:click='cityactive(index,cityE)'>{{item.city}}</p>
					<h3>F</h3>
					<p v-for='(item,index) in cityF' v-on:click='cityactive(index,cityF)'>{{item.city}}</p>
					<h3>G</h3>
					<p v-for='(item,index) in cityG' v-on:click='cityactive(index,cityG)'>{{item.city}}</p>
					<h3>H</h3>
					<p v-for='(item,index) in cityH' v-on:click='cityactive(index,cityH)'>{{item.city}}</p>
					<h3>J</h3>
					<p v-for='(item,index) in cityJ' v-on:click='cityactive(index,cityJ)'>{{item.city}}</p>
					<h3>K</h3>
					<p v-for='(item,index) in cityK' v-on:click='cityactive(index,cityK)'>{{item.city}}</p>
					<h3>L</h3>
					<p v-for='(item,index) in cityL' v-on:click='cityactive(index,cityL)'>{{item.city}}</p>
					<h3>M</h3>
					<p v-for='(item,index) in cityM' v-on:click='cityactive(index,cityM)'>{{item.city}}</p>
					<h3>N</h3>
					<p v-for='(item,index) in cityN' v-on:click='cityactive(index,cityN)'>{{item.city}}</p>
					<h3>P</h3>
					<p v-for='(item,index) in cityP' v-on:click='cityactive(index,cityP)'>{{item.city}}</p>
					<h3>Q</h3>
					<p v-for='(item,index) in cityQ' v-on:click='cityactive(index,cityQ)'>{{item.city}}</p>
					<h3>R</h3>
					<p v-for='(item,index) in cityR' v-on:click='cityactive(index,cityR)'>{{item.city}}</p>
					<h3>S</h3>
					<p v-for='(item,index) in cityS' v-on:click='cityactive(index,cityS)'>{{item.city}}</p>
					<h3>T</h3>
					<p v-for='(item,index) in cityT' v-on:click='cityactive(index,cityT)'>{{item.city}}</p>
					<h3>W</h3>
					<p v-for='(item,index) in cityW' v-on:click='cityactive(index,cityW)'>{{item.city}}</p>
					<h3>X</h3>
					<p v-for='(item,index) in cityX' v-on:click='cityactive(index,cityX)'>{{item.city}}</p>
					<h3>Y</h3>
					<p v-for='(item,index) in cityY' v-on:click='cityactive(index,cityY)'>{{item.city}}</p>
					<h3>Z</h3>
					<p v-for='(item,index) in cityZ' v-on:click='cityactive(index,cityZ)'>{{item.city}}</p>
				</div>
				<div v-show='zimShow' class="zimShow" v-text='zimText'></div>
			</article>
			<article class="search-box" id="search-box" v-show='isCancel'>
				<p class="sousuo" v-for='(item,index) in sousuos' v-on:click='cityactive(index,sousuos)'>{{item.city}}</p>
			</article>
		</section>
	`,
	methods:{
		//调用城市选择组件
		cityFun:function(){
	        var cityChoiceBox=document.getElementById('cityChoiceBox');
	        var citySidaber=document.getElementById('city-sidaber');
	        var clientW=document.documentElement.clientWidth||document.body.clientWidth;
	        cityChoiceBox.style.left=clientW+'px';
	        cityChoiceBox.style.display="block"
	        this.starMove(cityChoiceBox,{left:0},function(){
	        	citySidaber.style.display="block"
	        });
	     },
	     //关闭城市选择组件
	     cityClose:function(){
	     	this.isCancel=false;
	        var cityChoiceBox=document.getElementById('cityChoiceBox');
	        var citySidaber=document.getElementById('city-sidaber');
	        var clientW=document.documentElement.clientWidth||document.body.clientWidth;
	        citySidaber.style.display="none"
	        this.starMove(cityChoiceBox,{left:clientW},function(){
	        	cityChoiceBox.style.display="none"
	        });
	     },
	     //变速运动
	     starMove:function(obj,json,fn){//添加一个回调函数fn
	        function getStyle(obj,attr){
	          if(obj.currentStyle){
	            return obj.currentStyle[attr];
	            }else{
	              return getComputedStyle(obj,false)[attr];
	              }
	    	}
	        clearInterval(obj.timer);
	        obj.timer = setInterval(function(){
	          var flag = true; //假设都到达了目标值
	          for(var attr in json){
	            //1.取当前值
	            var icur = 0;
	            icur = parseInt(getStyle(obj,attr));
	            //2.算速度
	            var speed = (json[attr] - icur)/8;
	            speed = speed>0?Math.ceil(speed):Math.floor(speed);
	            //3.检查停止
	            if(icur != json[attr]){
	              flag = false;
	            }
	            obj.style[attr] = icur + speed + "px";
	            if(flag){
	              clearInterval(obj.timer);
	              if(fn){//判断是否存在回调函数,并调用
	                fn();
	                }
	              }
	            }
	        },20);
	    },
	    //搜索框获取焦点进入搜索层
	    search:function(){
	    	this.isCancel=true;
	    },
	    //热门活动
	    hostCityss:function(){
			var j=0;
			for(var i=0;i<15;i++){
               Vue.set(this.hostCitys,j,this.citys[i]);
               j++
         	}
		},
		cityactive:function(index,cityss){
			this.cityClose();
			this.zimShow=false;
			this.$emit("tochildevent",cityss[index].city)
		},
		//侧栏字母鼠标按下事件
		mousedownFun:function(index){
			this.zimShow=!this.zimShow;
			this.zimText=this.sidabers[index]
		},
		//侧栏字母鼠标弹起事件
		mouseupFun:function(index){
			this.zimShow=!this.zimShow;
			var cityChoiceBox=document.getElementById('cityChoiceBox');
			var h3=cityChoiceBox.getElementsByTagName('h3');
			var timer = null;	
			function scrT(iTarget){
				clearInterval(timer);
				document.ontouchstart=function(){
					clearInterval(timer);
				}
				timer = setInterval(function(){
				var scrollT = document.documentElement.scrollTop || document.body.scrollTop,
				    speed = 0;
				speed = Math.floor((iTarget - scrollT)/5);
				if(scrollT == iTarget){
					clearInterval(timer);
					}else{
						document.documentElement.scrollTop = scrollT + speed;
						document.body.scrollTop = scrollT + speed;
						}
				},30);
			}
			scrT(h3[index].offsetTop-50);
		}
	},
	//首字母过滤
	computed: {
        cityA: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='a';
            });
        },
        cityB: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='b';
            });
        },
        cityC: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='c';
            });
        },
        cityD: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='d';
            });
        },
        cityE: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='e';
            });
        },
        cityF: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='f';
            });
        },
        cityG: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='g';
            });
        },
        cityH: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='h';
            });
        },
        cityJ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='j';
            });
        },
        cityK: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='k';
            });
        },
        cityL: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='l';
            });
        },
        cityM: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='m';
            });
        },
        cityN: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='n';
            });
        },
        cityP: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='p';
            });
        },
        cityQ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='q';
            });
        },
        cityR: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='r';
            });
        },
        cityS: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='s';
            });
        },
        cityT: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='t';
            });
        },
        cityW: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='w';
            });
        },
        cityX: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='x';
            });
        },
        cityY: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='y';
            });
        },
        cityZ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='z';
            });
        },
        //搜索过滤
        sousuos:function(){
        	var ssval = this.ssval;
        	return this.citys.filter(function (item) {
                return item.py.indexOf(ssval)!= -1 || item.city.indexOf(ssval) != -1;
            });
        }
    },
	mounted:function(){
		window.addEventListener('load',function(){
			var searchBox=document.getElementById('search-box');
			var srollH=document.documentElement.scrollHeight;
			searchBox.style.height=srollH+'px';
			
		})
		this.hostCitys();
	}

})

Vue.component('com-citychoice_two',{
	data:function(){
		return {
			isCancel:false,
			zimShow:false,
			ssval:'',
			zimText:'',
			sidabers:[
				'热门','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'
			],
			citys:[
				{city:'法兰克福',py:'falankefu'},{city:'福冈',py:'fugang'},{city:'佛山',py:'foshan'},{city:'广汉',py:'guanghan'},{city:'格尔木',py:'geermu'},
				{city:'广元',py:'guangyuan'},{city:'海口',py:'haikou'},{city:'河内',py:'henei'},{city:'呼和浩特',py:'huhehaote'},
				{city:'合肥',py:'hefei'},{city:'杭州',py:'hangzhou'},{city:'香港',py:'xianggang'},{city:'普吉岛',py:'pujidao'},{city:'海拉尔',py:'hailaer'},
				{city:'哈密',py:'hami'},{city:'衡阳',py:'hengyang'},{city:'哈尔滨',py:'haerbin'},{city:'和田',py:'hetian'},
				{city:'汉中',py:'hanzhong'},{city:'首尔仁川',py:'shouerrenchuan'},{city:'银川',py:'yinchuan'},{city:'庆阳',py:'qingyang'},
				{city:'纽约',py:'niuyue'},{city:'嘉峪关',py:'jiayuguan'},{city:'西双版纳',py:'xishuangbanna'},{city:'九江',py:'jiujiang'},
				{city:'泉州',py:'quanzhou'},{city:'锦州',py:'jinzhou'},{city:'衢州',py:'quzhou'},{city:'广元',py:'guangyuan'},
				{city:'喀什',py:'kashi'},{city:'南昌',py:'nanchang'},{city:'昆明',py:'kunming'},
				{city:'三亚',py:'sanya'},{city:'深圳',py:'shenzhen'},{city:'大邱',py:'daqiu'},
				{city:'青岛',py:'qingdao'},{city:'塔什干',py:'tashigan'},{city:'济南',py:'jinan'},{city:'天津',py:'tianjin'},
				{city:'黄山',py:'huangshan'},{city:'太原',py:'taiyuan'},{city:'乌兰巴托',py:'wulanbatuo'},{city:'阿巴坎',py:'abakan'},
				{city:'乌鲁木齐',py:'wulumuqi'},{city:'潍坊',py:'weifang'},{city:'威海',py:'weihai'},{city:'温州',py:'wenzhou'},
				{city:'武汉',py:'wuhan'},{city:'武夷山',py:'wuyishan'},{city:'梧州',py:'wuzhou'},{city:'襄阳',py:'xiangyang'},
				{city:'西昌',py:'xichang'},{city:'西郊',py:'xijiao'},{city:'西安',py:'xian'},{city:'厦门',py:'xiamen'},
				{city:'西宁',py:'xining'},{city:'徐州',py:'xuzhou'},{city:'宜宾',py:'yibin'},
				{city:'宜昌',py:'yichang'},{city:'伊宁',py:'yining'},{city:'义乌',py:'yiwu'},{city:'烟台',py:'yantai'},
				{city:'温哥华',py:'wengehua'},{city:'多伦多',py:'duolunduo'},{city:'湛江',py:'zhanjiang'},{city:'珠海',py:'zhuhai'},
				{city:'万州',py:'wanzhou'},{city:'榆林',py:'yulin'},{city:'济州',py:'jizhou'},{city:'济宁',py:'jining'},{city:'金昌',py:'jinchang'},
				{city:'赣州',py:'ganzhou'},{city:'库尔勒',py:'kuerle'},{city:'克拉玛依',py:'kelamayi'},{city:'吉隆坡',py:'jilongpo'},
				{city:'贵阳',py:'guiyang'},{city:'桂林',py:'guilin'},{city:'洛杉矶',py:'luoshanji'},{city:'伦敦',py:'lundun'},{city:'兰州',py:'lanzhou'},
				{city:'丽江',py:'lijiang'},{city:'庐山',py:'lushan'},{city:'拉萨',py:'lasa'},{city:'洛阳',py:'luoyang'},
				{city:'连云港',py:'lianyungang'},{city:'临沂',py:'linyi'},{city:'柳州',py:'liuzhou'},{city:'泸州',py:'luzhou'},{city:'澳门',py:'aomen'},
				{city:'绵阳',py:'mianyang'},{city:'莫斯科',py:'mosike'},{city:'南充',py:'nanchong'},{city:'北京南苑',py:'beijinnanyuan'},{city:'齐齐哈尔',py:'qiqihaer'},
				{city:'宁波',py:'ningbo'},{city:'名古屋',py:'mingguwu'},{city:'长崎',py:'changqi'},{city:'南京',py:'nanjing'},{city:'南宁',py:'nanning'},
				{city:'南阳',py:'nanyang'},{city:'东京成田',py:'dongjinchengtian'},{city:'南通',py:'nantong'},{city:'南头',py:'nantou'},
				{city:'冈山',py:'gangshan'},{city:'芝加哥',py:'zhijiage'},{city:'大阪',py:'daban'},{city:'北京首都',py:'beijinshoudu'},
				{city:'柬埔寨',py:'jianpuzhai'},{city:'釜山',py:'fushan'},{city:'上海浦东',py:'shanghaipudong'},{city:'旧金山',py:'jiujinshan'},
				{city:'胡志明',py:'huzhiming'},{city:'上海虹桥',py:'shanghaihongqiao'},{city:'沈阳',py:'shenyang'},{city:'秦皇岛',py:'qinhuangdao'},
				{city:'新加坡',py:'xinjiapo'},{city:'石家庄',py:'shijiazhuang'},{city:'汕头',py:'shantou'},{city:'柏林',py:'bolin'},
				{city:'悉尼',py:'xini'},{city:'巴塞罗那',py:'basailuona'},{city:'景德镇',py:'jingdezhen'},{city:'张掖',py:'zhangye'},
				{city:'清迈',py:'qingmai'},{city:'巴库',py:'baku'},{city:'新泻',py:'xinxie'},{city:'北海',py:'beihai'},
				{city:'安康',py:'ankang'},{city:'邯郸',py:'handan'},{city:'九寨沟',py:'jiuzhaigou'},{city:'阎良',py:'yanliang'},
				{city:'富山',py:'fushan'},{city:'乌海',py:'wuhai'},{city:'冲绳',py:'chongsheng'},{city:'盐城',py:'yancheng'},
				{city:'安阳',py:'anyang'},{city:'孟买',py:'mengmai'},{city:'德里',py:'deli'},{city:'纽伦堡',py:'niulunbao'},
				{city:'东营',py:'dongying'},{city:'安顺',py:'anshun'},{city:'阿姆斯特丹',py:'amusitedan'},{city:'无锡',py:'wuxi'},
				{city:'鄂尔多斯',py:'eerduosi'},{city:'运城',py:'yuncheng'},{city:'中卫',py:'zhongwei'},{city:'台北松山',py:'taibeisongshan'},
				{city:'台北桃园',py:'taibeitaoyuan'},{city:'玉树',py:'yushu'},{city:'固原',py:'guyuan'},{city:'淮安',py:'huaian'},
				{city:'大庆',py:'daqing'},{city:'高松',py:'gaosong'},{city:'天水',py:'tianshui'},{city:'清州',py:'qingzhou'},
				{city:'腾冲',py:'tengchong'},{city:'阿拉木图',py:'alamutu'},{city:'安克雷奇',py:'akeleiqi'},{city:'鞍山',py:'anshan'},
				{city:'安庆',py:'anqing'},{city:'包头',py:'baotou'},{city:'曼谷',py:'mangu'},{city:'布鲁塞尔',py:'bulusaier'},
				{city:'文莱',py:'wenlai'},{city:'广州',py:'guangzhou'},{city:'巴黎戴高乐',py:'balidaigaole'},{city:'常德',py:'changde'},
				{city:'雅加达',py:'yajiada'},{city:'郑州',py:'zhengzhou'},{city:'长春',py:'changchun'},{city:'长治',py:'changzhi'},
				{city:'重庆',py:'chongqing'},{city:'科隆坡',py:'kelongpo'},{city:'长沙',py:'changsha'},{city:'成都',py:'chengdu'},
				{city:'常州',py:'changzhou'},{city:'大同',py:'datong'},{city:'达州',py:'dazhou'},{city:'德里',py:'deli'},
				{city:'大连',py:'dalian'},{city:'敦煌',py:'dunhuang'},{city:'迪拜',py:'dibai'},{city:'张家界',py:'zhangjiajie'},
				{city:'恩施',py:'enshi'},{city:'延安',py:'yanan'},{city:'平壤',py:'pingrang'},{city:'福州',py:'fuzhou'},
				{city:'阿巴坎',py:'abakan'},{city:'首尔',py:'shouer'},{city:'阜阳',py:'fuyang'},{city:'井冈山',py:'jinggangshan'},
				{city:'锡林浩特',py:'xilinhaote'},{city:'迪庆',py:'diqing'},{city:'帕尔马',py:'paerma'},
				{city:'青森',py:'qingsen'},{city:'瓦特',py:'wate'},{city:'秋田',py:'qiutian'},{city:'沙巴亚庇 ',py:'shabayabi'},
				{city:'比仕凯克',py:'bishikaike'},{city:'雅典',py:'yadian'},{city:'开罗',py:'kailuo'},{city:'宿雾',py:'suwu'},
				{city:'朝阳',py:'chaoyang'},{city:'赤峰',py:'chifeng'},{city:'哥本哈根',py:'gebenhagen'},{city:'达卡',py:'daka'},
				{city:'当阳',py:'dangyang'},{city:'丹东',py:'dandong'},{city:'布琼布拉',py:'buqiongbula'},{city:'亚的',py:'yadi'},
				{city:'巴厘岛',py:'balidao'},{city:'杜尚别',py:'dushangbie'},{city:'新泽西',py:'xinzexi'},{city:'罗马',py:'luoma'},
				{city:'福岛',py:'fudao'},{city:'伏龙芝',py:'fulongzhi'},{city:'静冈',py:'jinggang'},{city:'广岛',py:'guangdao'},
				{city:'乌兰浩特',py:'wulanhaote'},{city:'花卷',py:'huajuan'},{city:'舟山',py:'zhoushan'},{city:'赤塔',py:'chita'},
				{city:'惠州',py:'huizhou'},{city:'台州',py:'taizhou'},{city:'伊尔库',py:'yierku'},{city:'伊斯兰堡',py:'yisilanbao'},
				{city:'石见',py:'shijian'},{city:'出云',py:'chuyun'},{city:'佳木斯',py:'jiamusi'},{city:'鸡西',py:'jixi'},
				{city:'高松',py:'gaosong'},{city:'库车',py:'kuche'},{city:'高知',py:'gaozhi'},{city:'卡拉奇',py:'kaqila'},
				{city:'大阪关西',py:'dabanguanxi'},{city:'克诺',py:'kenuo'},{city:'宫崎',py:'gongqi'},{city:'熊本',py:'xiongben'},
				{city:'鹿儿岛',py:'luerdao'},{city:'拉瓦格',py:'lawage'},{city:'耒阳',py:'leiyang'},{city:'列日',py:'lieri'},
				{city:'光化',py:'guanghua'},{city:'澳码',py:'aoma'},{city:'马德里',py:'madeli'},{city:'曼德勒',py:'mandele'},
				{city:'墨尔本',py:'moerben'},{city:'孟菲斯',py:'mengfeisi'},{city:'米兰',py:'milan'},{city:'马尼拉',py:'manila'},
				{city:'明斯克',py:'mingsike'},{city:'梅县',py:'meixian'},{city:'松山',py:'songshan'},{city:'金边',py:'jinbian'},
				{city:'清迈',py:'qingmai'},{city:'卡塔尔',py:'kataer'},{city:'利雅得',py:'liyade'},{city:'罗勇',py:'luoyong'},
				{city:'韶关',py:'shaoguan'},{city:'仙台',py:'xiantai'},{city:'西雅图',py:'xiyatu'},{city:'莎迦',py:'shajia'},
				{city:'沙市',py:'shashi'},{city:'塞班',py:'saiban'},{city:'斯德格尔摩',py:'sidegeermo'},{city:'思茅',py:'simao'},
				{city:'苏邦',py:'subang'},{city:'铜仁凤凰',py:'tongrenfenghuang'},{city:'通辽',py:'tongliao'},{city:'德岛',py:'dedao'},
				{city:'特拉维夫',py:'telaweifu'},{city:'富山',py:'fushan'},{city:'多莫杰多沃',py:'duomojieduowo'},{city:'布拉戈',py:'bulage'},
				{city:'堪察加',py:'kancajia'},{city:'萨马拉',py:'samala'},{city:'山口宇部',py:'shankouyubu'},{city:'维也纳',py:'weiyena'},
				{city:'符拉',py:'fula'},{city:'华沙',py:'huasha'},{city:'王家墩',py:'wangjiadun'},{city:'兴宁',py:'xingning'},
				{city:'苏黎世',py:'sulishi'},{city:'兴义',py:'xingyi'},{city:'黎平',py:'liping'},
				{city:'万象',py:'wanxiang'},{city:'北海',py:'beihai'},{city:'曼谷廊曼',py:'mangulangman'},{city:'高雄',py:'gaoxiong'},
				{city:'荔波',py:'libo'},{city:'永州',py:'yongzhou'},{city:'遵义',py:'zunyi'},{city:'大理',py:'dali'},
				{city:'百色',py:'baise'},{city:'仰光',py:'yangguang'},{city:'芒市',py:'mangshi'},{city:'毕节',py:'bijie'},
				{city:'保山',py:'baoshan'},{city:'加德满都',py:'jiademandu'},{city:'日喀则',py:'rikaze'},{city:'凯里黄平',py:'kailihuangping'},
				{city:'宜春',py:'yichun'},{city:'临沧',py:'lincang'},{city:'文山',py:'wenshan'},{city:'泰国万伦',py:'taiguowanlun'},
				{city:'牡丹江',py:'mudanjiang'},{city:'甲米',py:'jiami'},{city:'林芝',py:'linzhi'},{city:'光州',py:'guangzhou'},
				{city:'怀化芷江',py:'huaihuazhijiang'},{city:'威尼斯',py:'weinisi'},{city:'黔江',py:'qianjiang'},{city:'马累',py:'malei'},
				{city:'唐山',py:'tangshan'},{city:'新加坡实里塔',py:'xinjiaposhilita'},{city:'长白山',py:'changbaishan'},{city:'阎良',py:'yanliang'},
				{city:'吕梁',py:'lvliang'},{city:'六盘水',py:'liupangshui'},{city:'河池',py:'hechi'},{city:'吉林',py:'jilin'},{city:'日照',py:'rizhao'},
				{city:'邦达',py:'bangda'},{city:'岘港',py:'xiangang'},{city:'蒲城',py:'pucheng'},{city:'盐城',py:'yancheng'},
				{city:'攀枝花',py:'panzhihua'},{city:'阿克苏',py:'akesu'},{city:'卡尔',py:'kaer'},{city:'满洲里',py:'manzhouli'},
				{city:'清莱',py:'qinglai'},{city:'奇姆肯特',py:'qimukente'},{city:'巴塞尔',py:'basaier'},{city:'布尔歇',py:'buerxie'},
				{city:'博鳌',py:'boao'},{city:'班加罗尔',py:'banjialuoer'},{city:'东京羽田',py:'dongjinyutian'},{city:'首尔金浦',py:'shouerjinpu'},
				{city:'五台山',py:'wutaishan'},{city:'稻城',py:'daocheng'},{city:'苏梅岛',py:'sumeidao'},{city:'芽庄',py:'yazhuang'},
				{city:'神农架红坪',py:'shennongjiahongping'},{city:'民丹岛',py:'mindandao'},{city:'泸沽湖',py:'lugudao'},{city:'十堰',py:'shiyan'},
				{city:'费尔班克斯',py:'feierbankesi'},{city:'阿斯塔纳',py:'asitana'},{city:'帕劳',py:'palao'},{city:'茅台',py:'maotai'},
				{city:'九华山',py:'shashi'},{city:'西哈努克',py:'saiban'},{city:'安庆',py:'sidegeermo'},{city:'北戴河',py:'simao'},
				{city:'临汾',py:'linfen'},{city:'邵阳',py:'shaoyang'},{city:'美娜多',py:'meinaduo'},{city:'兰卡威 ',py:'lakawei'},
				{city:'莫斯科',py:'mosike'},{city:'上饶',py:'shangrao'},{city:'张家口',py:'zhangjiakou'},{city:'芭提雅',py:'batiya'},{city:'岳阳',py:'yueyang'},
				{city:'揭阳',py:'jieyang'},{city:'扬州泰州',py:'yangzhoutaizhou'}
			],
			hostCitys:[{city:'贵阳',py:'guiyang'},{city:'北京首都',py:'beijinshoudu'},{city:'上海虹桥',py:'shanghaihongqiao'},{city:'广州',py:'guangzhou'},
					   {city:'深圳',py:'shenzhen'},{city:'成都',py:'chengdu'},{city:'杭州',py:'hangzhou'},{city:'武汉',py:'wuhan'},{city:'重庆',py:'chongqing'}
					  ]
		}
	},
	template:`
		<section class="cityChoiceBox" id="cityChoiceBox_two">
			<article class="cityChoice-top transit" v-bind:class='{focus:isCancel}'>
				<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
					<span class="fa fa-angle-left" v-if='!isCancel' v-on:click='cityClose'></span>
				</transition>
				<input type="text" class="search-input" placeholder="中文/拼音/首写字母" v-model.trim='ssval' v-on:focus='search' />
				<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
					<i v-if='isCancel' v-on:click='isCancel=false' class="cancel">取消</i>
				</transition>
			</article>
			<article class="city-Box" v-show='!isCancel'>
				<div class="city-sidaber" id="city-sidaber_two" v-show='!isCancel'>
					<p v-for="(sidaber,index) in sidabers" v-on:touchstart='mousedownFun(index)' v-on:touchend='mouseupFun(index)' v-text='sidaber'></p>
				</div>
				<div class="host-city">
					<h3>热门城市</h3>
					<span v-for='(item,index) in hostCitys' v-text='item.city' v-on:click='cityactive(index,hostCitys)'></span>
				</div>
				<div class="city-content">
					<h3>A</h3>
					<p v-for='(item,index) in cityA' v-on:click='cityactive(index,cityA)'>{{item.city}}</p>
					<h3>B</h3>
					<p v-for='(item,index) in cityB' v-on:click='cityactive(index,cityB)'>{{item.city}}</p>
					<h3>C</h3>
					<p v-for='(item,index) in cityC' v-on:click='cityactive(index,cityC)'>{{item.city}}</p>
					<h3>D</h3>
					<p v-for='(item,index) in cityD' v-on:click='cityactive(index,cityD)'>{{item.city}}</p>
					<h3>E</h3>
					<p v-for='(item,index) in cityE' v-on:click='cityactive(index,cityE)'>{{item.city}}</p>
					<h3>F</h3>
					<p v-for='(item,index) in cityF' v-on:click='cityactive(index,cityF)'>{{item.city}}</p>
					<h3>G</h3>
					<p v-for='(item,index) in cityG' v-on:click='cityactive(index,cityG)'>{{item.city}}</p>
					<h3>H</h3>
					<p v-for='(item,index) in cityH' v-on:click='cityactive(index,cityH)'>{{item.city}}</p>
					<h3>J</h3>
					<p v-for='(item,index) in cityJ' v-on:click='cityactive(index,cityJ)'>{{item.city}}</p>
					<h3>K</h3>
					<p v-for='(item,index) in cityK' v-on:click='cityactive(index,cityK)'>{{item.city}}</p>
					<h3>L</h3>
					<p v-for='(item,index) in cityL' v-on:click='cityactive(index,cityL)'>{{item.city}}</p>
					<h3>M</h3>
					<p v-for='(item,index) in cityM' v-on:click='cityactive(index,cityM)'>{{item.city}}</p>
					<h3>N</h3>
					<p v-for='(item,index) in cityN' v-on:click='cityactive(index,cityN)'>{{item.city}}</p>
					<h3>P</h3>
					<p v-for='(item,index) in cityP' v-on:click='cityactive(index,cityP)'>{{item.city}}</p>
					<h3>Q</h3>
					<p v-for='(item,index) in cityQ' v-on:click='cityactive(index,cityQ)'>{{item.city}}</p>
					<h3>R</h3>
					<p v-for='(item,index) in cityR' v-on:click='cityactive(index,cityR)'>{{item.city}}</p>
					<h3>S</h3>
					<p v-for='(item,index) in cityS' v-on:click='cityactive(index,cityS)'>{{item.city}}</p>
					<h3>T</h3>
					<p v-for='(item,index) in cityT' v-on:click='cityactive(index,cityT)'>{{item.city}}</p>
					<h3>W</h3>
					<p v-for='(item,index) in cityW' v-on:click='cityactive(index,cityW)'>{{item.city}}</p>
					<h3>X</h3>
					<p v-for='(item,index) in cityX' v-on:click='cityactive(index,cityX)'>{{item.city}}</p>
					<h3>Y</h3>
					<p v-for='(item,index) in cityY' v-on:click='cityactive(index,cityY)'>{{item.city}}</p>
					<h3>Z</h3>
					<p v-for='(item,index) in cityZ' v-on:click='cityactive(index,cityZ)'>{{item.city}}</p>
				</div>
				<div v-show='zimShow' class="zimShow" v-text='zimText'></div>
			</article>
			<article class="search-box" id="search-box_two" v-show='isCancel'>
				<p class="sousuo" v-for='(item,index) in sousuos' v-on:click='cityactive(index,sousuos)'>{{item.city}}</p>
			</article>
		</section>
	`,
	methods:{
		//调用城市选择组件
		cityFun:function(){
	        var cityChoiceBox=document.getElementById('cityChoiceBox_two');
	        var citySidaber=document.getElementById('city-sidaber_two');
	        var clientW=document.documentElement.clientWidth||document.body.clientWidth;
	        cityChoiceBox.style.left=clientW+'px';
	        cityChoiceBox.style.display="block"
	        this.starMove(cityChoiceBox,{left:0},function(){
	        	citySidaber.style.display="block"
	        });
	     },
	     //关闭城市选择组件
	     cityClose:function(){
	     	this.isCancel=false;
	        var cityChoiceBox=document.getElementById('cityChoiceBox_two');
	        var citySidaber=document.getElementById('city-sidaber_two');
	        var clientW=document.documentElement.clientWidth||document.body.clientWidth;
	        citySidaber.style.display="none"
	        this.starMove(cityChoiceBox,{left:clientW},function(){
	        	cityChoiceBox.style.display="none"
	        });
	     },
	     //变速运动
	     starMove:function(obj,json,fn){//添加一个回调函数fn
	        function getStyle(obj,attr){
	          if(obj.currentStyle){
	            return obj.currentStyle[attr];
	            }else{
	              return getComputedStyle(obj,false)[attr];
	              }
	    	}
	        clearInterval(obj.timer);
	        obj.timer = setInterval(function(){
	          var flag = true; //假设都到达了目标值
	          for(var attr in json){
	            //1.取当前值
	            var icur = 0;
	            icur = parseInt(getStyle(obj,attr));
	            //2.算速度
	            var speed = (json[attr] - icur)/8;
	            speed = speed>0?Math.ceil(speed):Math.floor(speed);
	            //3.检查停止
	            if(icur != json[attr]){
	              flag = false;
	            }
	            obj.style[attr] = icur + speed + "px";
	            if(flag){
	              clearInterval(obj.timer);
	              if(fn){//判断是否存在回调函数,并调用
	                fn();
	                }
	              }
	            }
	        },20);
	    },
	    //搜索框获取焦点进入搜索层
	    search:function(){
	    	this.isCancel=true;
	    },
	    //热门活动
	    hostCityss:function(){
			var j=0;
			for(var i=0;i<15;i++){
               Vue.set(this.hostCitys,j,this.citys[i]);
               j++
         	}
		},
		cityactive:function(index,cityss){
			this.cityClose();
			this.zimShow=false;
			this.$emit("tochildevent",cityss[index].city)
		},
		//侧栏字母鼠标按下事件
		mousedownFun:function(index){
			this.zimShow=!this.zimShow;
			this.zimText=this.sidabers[index]
		},
		//侧栏字母鼠标弹起事件
		mouseupFun:function(index){
			this.zimShow=!this.zimShow;
			var cityChoiceBox=document.getElementById('cityChoiceBox_two');
			var h3=cityChoiceBox.getElementsByTagName('h3');
			var timer = null;	
			function scrT(iTarget){
				clearInterval(timer);
				document.ontouchstart=function(){
					clearInterval(timer);
				}
				timer = setInterval(function(){
				var scrollT = document.documentElement.scrollTop || document.body.scrollTop,
				    speed = 0;
				speed = Math.floor((iTarget - scrollT)/5);
				if(scrollT == iTarget){
					clearInterval(timer);
					}else{
						document.documentElement.scrollTop = scrollT + speed;
						document.body.scrollTop = scrollT + speed;
						}
				},30);
			}
			scrT(h3[index].offsetTop-50);
		}
	},
	//首字母过滤
	computed: {
        cityA: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='a';
            });
        },
        cityB: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='b';
            });
        },
        cityC: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='c';
            });
        },
        cityD: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='d';
            });
        },
        cityE: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='e';
            });
        },
        cityF: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='f';
            });
        },
        cityG: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='g';
            });
        },
        cityH: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='h';
            });
        },
        cityJ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='j';
            });
        },
        cityK: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='k';
            });
        },
        cityL: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='l';
            });
        },
        cityM: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='m';
            });
        },
        cityN: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='n';
            });
        },
        cityP: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='p';
            });
        },
        cityQ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='q';
            });
        },
        cityR: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='r';
            });
        },
        cityS: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='s';
            });
        },
        cityT: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='t';
            });
        },
        cityW: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='w';
            });
        },
        cityX: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='x';
            });
        },
        cityY: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='y';
            });
        },
        cityZ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='z';
            });
        },
        //搜索过滤
        sousuos:function(){
        	var ssval = this.ssval;
        	return this.citys.filter(function (item) {
                return item.py.indexOf(ssval)!= -1 || item.city.indexOf(ssval) != -1;
            });
        }
    },
	mounted:function(){
		window.addEventListener('load',function(){
			var searchBox=document.getElementById('search-box_two');
			var srollH=document.documentElement.scrollHeight;
			searchBox.style.height=srollH+'px';
			
		})
		this.hostCitys();
	}

})

Vue.component('com-citychoice_three',{
	data:function(){
		return {
			isCancel:false,
			zimShow:false,
			ssval:'',
			zimText:'',
			sidabers:[
				'热门','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'
			],
			citys:[
				{city:'联合航空',py:'lianhehangkong'},{city:'朝鲜高丽',py:'chaoxiangaoli'},{city:'大新华',py:'daxinhua'},{city:'西部',py:'xibu'},
				{city:'华夏',py:'huaxia'},{city:'幸福航空',py:'xinfuhangkong'},
				{city:'重庆',py:'chongqing'},{city:'华航',py:'huahang'},{city:'翡翠',py:'feicui'},{city:'成都',py:'chengdu'},{city:'扬子江航空',py:'yangzijianghangkong'},
				{city:'东海',py:'donghai'},{city:'昆明',py:'kunming'},{city:'四川',py:'sichuan'},
				{city:'国航',py:'guohang'},{city:'国泰',py:'guotai'},{city:'南方',py:'nanfang'},{city:'亚太',py:'yatai'},
				{city:'泰国亚洲',py:'taiguoyazhou'},{city:'上海',py:'shanghai'},{city:'通用',py:'tongyong'},
				{city:'多彩贵州',py:'duocaiguizhou'},{city:'海直',py:'haizhi'},{city:'港联',py:'ganglian'},{city:'海航',py:'haihang'},
				{city:'日航',py:'rihang'},{city:'港龙',py:'ganglong'},{city:'大韩',py:'dahan'},
				{city:'厦门',py:'xiamen'},{city:'马来西亚',py:'malaixiya'},{city:'胜安',py:'shengan'},
				{city:'东方',py:'dongfang'},{city:'全日空',py:'quanrikong'},{city:'澳门',py:'aomen'},{city:'韩亚',py:'hanya'},
				{city:'菲律宾',py:'feilvbin'},{city:'山东',py:'shandong'},{city:'泰国',py:'taiguo'},{city:'金鹏',py:'jinpeng'},
				{city:'德威',py:'dewei'},{city:'斯克',py:'sike'},{city:'武汉',py:'wuhan'},{city:'深圳',py:'shenzhen'},
				{city:'浙江',py:'zejiang'},{city:'曼航',py:'manhang'},{city:'北京首都',py:'beijingshoudu'},{city:'中飞',py:'zhongfei'},
				{city:'香港航空',py:'xianganghangkong'},{city:'美联航',py:'meilianhang'},{city:'汉莎航空',py:'hanshahangkong'},{city:'加拿大',py:'jianada'},
				{city:'鹰联',py:'yinglian'},{city:'比利时',py:'bilishi'},{city:'广汉',py:'guanghan'},
				{city:'河北',py:'hebei'},{city:'祥鹏',py:'xiangpeng'},{city:'新加坡',py:'xinjiapo'},{city:'吉祥',py:'jixiang'},
				{city:'东星',py:'dongxing'},{city:'春秋',py:'chunqiu'},{city:'香港快运',py:'xianggangkuaiyun'},{city:'天津',py:'tianjin'},
				{city:'鲲鹏航空',py:'kunpenghangkong'},{city:'亚联',py:'yalian'},{city:'奥凯',py:'aokai'},{city:'立荣航空',py:'lironghangkong'},{city:'长荣航空',py:'changronghangkong'},
				{city:'天翼亚洲',py:'tianyiyazhou'},{city:'韩国釜山航空',py:'hanguofushanhangkong'},{city:'泰国东方',py:'taiguodongfang'},{city:'美洲航空',py:'meizhouhangkong'},
				{city:'冰岛',py:'bingdao'},{city:'法国航空',py:'faguohangkong'},{city:'阿塞拜疆',py:'asaibaijiang'},{city:'墨西哥',py:'moxige'},
				{city:'金鹿',py:'jinlu'},{city:'远东航空',py:'yuandonghangkong'},{city:'联合',py:'lianhe'},{city:'俄罗斯',py:'eluosi'},
				{city:'希腊航空',py:'xilahangkong'},{city:'西藏',py:'xizang'},{city:'中兴航空',py:'zhongxinghangkong'},{city:'彩虹',py:'caihong'},{city:'双阳',py:'shuangyang'},
				{city:'佳速',py:'jiasu'},{city:'云南英安',py:'yunnanyingan'},{city:'远大',py:'yuanda'},{city:'宝塔航空',py:'baotahangkong'},{city:'海峡快运',py:'haixiakuaiyun'},
				{city:'易斯达',py:'yisida'},{city:'泰国捷特亚洲',py:'taiguojieteyazhou'},{city:'长龙',py:'changlong'},{city:'环球',py:'huanqiu'},{city:'瑞丽',py:'ruili'},
				{city:'复兴',py:'fuxing'},{city:'青岛航空',py:'qingdaohangkong'},{city:'涌泉',py:'yongquan'},{city:'北部湾',py:'beibuwan'},
				{city:'捷星航空',py:'jiexinghangkong'},{city:'江西航空',py:'jiangxihangkong'},{city:'九元航空',py:'jiuyuanhangkong'},
				{city:'马印',py:'mayin'},{city:'长安',py:'changan'},{city:'红土',py:'hongtu'},{city:'捷星太平洋',py:'jiexingtaipingyang'},
				{city:'桂林',py:'guilin'},{city:'越南航空',py:'yuenanhangkong'},{city:'NEOS航空',py:'NEOShangkong'},{city:'友和道航空',py:'youhedaohangkong'},
				{city:'乌鲁木齐航空',py:'wulumuqihangkong'},{city:'俄皇航空',py:'ehuanghangkong'},{city:'柬埔寨澜湄航空',py:'jiapuzhailanmeihangkong'},{city:'福州',py:'fuzhou'}

			],
			hostCitys:[{city:'南方',py:'nanfang'},{city:'国航',py:'guohang'},{city:'山东',py:'shandong'},{city:'九元航空',py:'jiuyuanhangkong'},
					   {city:'成都',py:'chengdu'},{city:'海航',py:'haihang'},{city:'厦门',py:'xiamen'},{city:'多彩贵州',py:'duocaiguizhou'},{city:'吉祥',py:'jixiang'}
					  ]
		}
	},
	template:`
		<section class="cityChoiceBox" id="cityChoiceBox_three">
			<article class="cityChoice-top transit" v-bind:class='{focus:isCancel}'>
				<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
					<span class="fa fa-angle-left" v-if='!isCancel' v-on:click='cityClose'></span>
				</transition>
				<input type="text" class="search-input" placeholder="中文/拼音/首写字母" v-model.trim='ssval' v-on:focus='search' />
				<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
					<i v-if='isCancel' v-on:click='isCancel=false' class="cancel">取消</i>
				</transition>
			</article>
			<article class="city-Box" v-show='!isCancel'>
				<div class="city-sidaber" id="city-sidaber_three" v-show='!isCancel'>
					<p v-for="(sidaber,index) in sidabers" v-on:touchstart='mousedownFun(index)' v-on:touchend='mouseupFun(index)' v-text='sidaber'></p>
				</div>
				<div class="host-city">
					<h3>热门航空公司</h3>
					<span v-for='(item,index) in hostCitys' v-text='item.city' v-on:click='cityactive(index,hostCitys)'></span>
				</div>
				<div class="city-content">
					<h3>A</h3>
					<p v-for='(item,index) in cityA' v-on:click='cityactive(index,cityA)'>{{item.city}}</p>
					<h3>B</h3>
					<p v-for='(item,index) in cityB' v-on:click='cityactive(index,cityB)'>{{item.city}}</p>
					<h3>C</h3>
					<p v-for='(item,index) in cityC' v-on:click='cityactive(index,cityC)'>{{item.city}}</p>
					<h3>D</h3>
					<p v-for='(item,index) in cityD' v-on:click='cityactive(index,cityD)'>{{item.city}}</p>
					<h3>E</h3>
					<p v-for='(item,index) in cityE' v-on:click='cityactive(index,cityE)'>{{item.city}}</p>
					<h3>F</h3>
					<p v-for='(item,index) in cityF' v-on:click='cityactive(index,cityF)'>{{item.city}}</p>
					<h3>G</h3>
					<p v-for='(item,index) in cityG' v-on:click='cityactive(index,cityG)'>{{item.city}}</p>
					<h3>H</h3>
					<p v-for='(item,index) in cityH' v-on:click='cityactive(index,cityH)'>{{item.city}}</p>
					<h3>J</h3>
					<p v-for='(item,index) in cityJ' v-on:click='cityactive(index,cityJ)'>{{item.city}}</p>
					<h3>K</h3>
					<p v-for='(item,index) in cityK' v-on:click='cityactive(index,cityK)'>{{item.city}}</p>
					<h3>L</h3>
					<p v-for='(item,index) in cityL' v-on:click='cityactive(index,cityL)'>{{item.city}}</p>
					<h3>M</h3>
					<p v-for='(item,index) in cityM' v-on:click='cityactive(index,cityM)'>{{item.city}}</p>
					<h3>N</h3>
					<p v-for='(item,index) in cityN' v-on:click='cityactive(index,cityN)'>{{item.city}}</p>
					<h3>P</h3>
					<p v-for='(item,index) in cityP' v-on:click='cityactive(index,cityP)'>{{item.city}}</p>
					<h3>Q</h3>
					<p v-for='(item,index) in cityQ' v-on:click='cityactive(index,cityQ)'>{{item.city}}</p>
					<h3>R</h3>
					<p v-for='(item,index) in cityR' v-on:click='cityactive(index,cityR)'>{{item.city}}</p>
					<h3>S</h3>
					<p v-for='(item,index) in cityS' v-on:click='cityactive(index,cityS)'>{{item.city}}</p>
					<h3>T</h3>
					<p v-for='(item,index) in cityT' v-on:click='cityactive(index,cityT)'>{{item.city}}</p>
					<h3>W</h3>
					<p v-for='(item,index) in cityW' v-on:click='cityactive(index,cityW)'>{{item.city}}</p>
					<h3>X</h3>
					<p v-for='(item,index) in cityX' v-on:click='cityactive(index,cityX)'>{{item.city}}</p>
					<h3>Y</h3>
					<p v-for='(item,index) in cityY' v-on:click='cityactive(index,cityY)'>{{item.city}}</p>
					<h3>Z</h3>
					<p v-for='(item,index) in cityZ' v-on:click='cityactive(index,cityZ)'>{{item.city}}</p>
				</div>
				<div v-show='zimShow' class="zimShow" v-text='zimText'></div>
			</article>
			<article class="search-box" id="search-box_three" v-show='isCancel'>
				<p class="sousuo" v-for='(item,index) in sousuos' v-on:click='cityactive(index,sousuos)'>{{item.city}}</p>
			</article>
		</section>
	`,
	methods:{
		//调用城市选择组件
		cityFun:function(){
	        var cityChoiceBox=document.getElementById('cityChoiceBox_three');
	        var citySidaber=document.getElementById('city-sidaber_three');
	        var clientW=document.documentElement.clientWidth||document.body.clientWidth;
	        cityChoiceBox.style.left=clientW+'px';
	        cityChoiceBox.style.display="block"
	        this.starMove(cityChoiceBox,{left:0},function(){
	        	citySidaber.style.display="block"
	        });
	     },
	     //关闭城市选择组件
	     cityClose:function(){
	     	this.isCancel=false;
	        var cityChoiceBox=document.getElementById('cityChoiceBox_three');
	        var citySidaber=document.getElementById('city-sidaber_three');
	        var clientW=document.documentElement.clientWidth||document.body.clientWidth;
	        citySidaber.style.display="none"
	        this.starMove(cityChoiceBox,{left:clientW},function(){
	        	cityChoiceBox.style.display="none"
	        });
	     },
	     //变速运动
	     starMove:function(obj,json,fn){//添加一个回调函数fn
	        function getStyle(obj,attr){
	          if(obj.currentStyle){
	            return obj.currentStyle[attr];
	            }else{
	              return getComputedStyle(obj,false)[attr];
	              }
	    	}
	        clearInterval(obj.timer);
	        obj.timer = setInterval(function(){
	          var flag = true; //假设都到达了目标值
	          for(var attr in json){
	            //1.取当前值
	            var icur = 0;
	            icur = parseInt(getStyle(obj,attr));
	            //2.算速度
	            var speed = (json[attr] - icur)/8;
	            speed = speed>0?Math.ceil(speed):Math.floor(speed);
	            //3.检查停止
	            if(icur != json[attr]){
	              flag = false;
	            }
	            obj.style[attr] = icur + speed + "px";
	            if(flag){
	              clearInterval(obj.timer);
	              if(fn){//判断是否存在回调函数,并调用
	                fn();
	                }
	              }
	            }
	        },20);
	    },
	    //搜索框获取焦点进入搜索层
	    search:function(){
	    	this.isCancel=true;
	    },
	    //热门活动
	    hostCityss:function(){
			var j=0;
			for(var i=0;i<15;i++){
               Vue.set(this.hostCitys,j,this.citys[i]);
               j++
         	}
		},
		cityactive:function(index,cityss){
			this.cityClose();
			this.zimShow=false;
			this.$emit("tochildevent",cityss[index].city)
		},
		//侧栏字母鼠标按下事件
		mousedownFun:function(index){
			this.zimShow=!this.zimShow;
			this.zimText=this.sidabers[index]
		},
		//侧栏字母鼠标弹起事件
		mouseupFun:function(index){
			this.zimShow=!this.zimShow;
			var cityChoiceBox=document.getElementById('cityChoiceBox_three');
			var h3=cityChoiceBox.getElementsByTagName('h3');
			var timer = null;	
			function scrT(iTarget){
				clearInterval(timer);
				document.ontouchstart=function(){
					clearInterval(timer);
				}
				timer = setInterval(function(){
				var scrollT = document.documentElement.scrollTop || document.body.scrollTop,
				    speed = 0;
				speed = Math.floor((iTarget - scrollT)/5);
				if(scrollT == iTarget){
					clearInterval(timer);
					}else{
						document.documentElement.scrollTop = scrollT + speed;
						document.body.scrollTop = scrollT + speed;
						}
				},30);
			}
			scrT(h3[index].offsetTop-50);
		}
	},
	//首字母过滤
	computed: {
        cityA: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='a';
            });
        },
        cityB: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='b';
            });
        },
        cityC: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='c';
            });
        },
        cityD: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='d';
            });
        },
        cityE: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='e';
            });
        },
        cityF: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='f';
            });
        },
        cityG: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='g';
            });
        },
        cityH: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='h';
            });
        },
        cityJ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='j';
            });
        },
        cityK: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='k';
            });
        },
        cityL: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='l';
            });
        },
        cityM: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='m';
            });
        },
        cityN: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='n';
            });
        },
        cityP: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='p';
            });
        },
        cityQ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='q';
            });
        },
        cityR: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='r';
            });
        },
        cityS: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='s';
            });
        },
        cityT: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='t';
            });
        },
        cityW: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='w';
            });
        },
        cityX: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='x';
            });
        },
        cityY: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='y';
            });
        },
        cityZ: function () {
            return this.citys.filter(function (item) {
                return item.py.substr(0, 1)=='z';
            });
        },
        //搜索过滤
        sousuos:function(){
        	var ssval = this.ssval;
        	return this.citys.filter(function (item) {
                return item.py.indexOf(ssval)!= -1 || item.city.indexOf(ssval) != -1;
            });
        }
    },
	mounted:function(){
		window.addEventListener('load',function(){
			var searchBox=document.getElementById('search-box_three');
			var srollH=document.documentElement.scrollHeight;
			searchBox.style.height=srollH+'px';
			
		})
		this.hostCitys();
	}

})